<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8"/>
    <meta name="viewport" content="width=device-width,initial-scale=1.3333,user-scalable=0"/>
    <title>Title</title>
    <link rel="stylesheet" href="css/main.css">
    <script src="js/vue.min.js"></script>
    <script src="js/signature_pad.js"></script>
    <script src="js/jquery-1.11.2.min.js"></script>

    <script src="js/options.js"></script>
    <script src="js/xzqh.js"></script>
    <script src="layer/layui.all.js"></script>
    <link rel="stylesheet" href="layer/css/layui.css">

    <style>
        * {
            padding: 0;
            margin: 0
        }

        #app {
            height: 600px;
            width: 1024px;
            background: url("images/main_bg_all.png");
            position: relative;
        }

        #signature_container {
            height: 600px;
            width: 1024px;
            background: url("images/main_bg_all.png");
        }

        .top_container {
            height: 75px;
            position: relative;
        }

        .div_client_name{
            position: absolute;
            top: 27px;
            left: 107px;
            width: 200px;
            height: 28px;
            color: #3a60a1;
            font-size: 26px;
            line-height: 28px;
            font-weight: 700;
            padding: 0;
        }

        .main_container {
            height: 525px;
            display: flex;
            flex-direction: row;
            overflow-y: scroll;
        }

        .main_container::-webkit-scrollbar {
            display: none;
        }

        .service_btn_big {
            font-size: 24px;
        }

        #signature-pad {
            height: 380px;
            width: 800px;
            margin: 27px 112px 20px;
            border-radius: 12px;
            border: 2px solid darkslategray;
            box-shadow: darkgrey 10px 10px 30px 5px;
            background-color: #FFFFFF;
        }

        .service_btn {
            height: 64px;
            width: 321px;
            margin: 0px 12px 7px;
            background: url("images/service_btn.png") no-repeat;
            font-size: 20px;
            color: white;
            text-align: center;
            line-height: 64px;
        }

        .service_btn_big {
            font-size: 24px;
        }

    </style>
    <script>

    </script>
</head>
<body>
<div id="body_div" style="height: 600px; width: 1024px; margin: 0; padding: 0;">
    <div>

        <div id="signature_container" >
            <div class="top_container">
                <div class="div_client_name"></div>
            </div>
            <div class="main_container" id="sign_container" style="flex-direction: column">
                <div id="signature-pad">
                    <canvas></canvas>
                </div>
                <div id="btn_container" style="position: relative">
                    <div class="service_btn service_btn_big" style="position: absolute;left: 160px;" onclick="clearSign();">
                        清空签名
                    </div>
                    <div class="service_btn service_btn_big" style="position: absolute;left: 520px;" onclick="saveSign();">
                        保存签名
                    </div>
                </div>
                <img src="" id="imgSign" width="200"/>
            </div>
        </div>

    </div>
</div>
    <script>


        $(document).ready(function(){
           initOut2in();
           //$(".div_client_name").html(shell.getClientName());
        });

        var canvas = document.getElementById('signature-pad').querySelector('canvas');
        var signPad = null;
        signPad = new SignaturePad(canvas);
        resizeCanvas();

        function resizeCanvas() {
            var ratio = Math.max(window.devicePixelRatio || 1, 1);
            canvas.width = 800;
            canvas.height = 380;
            canvas.getContext("2d").scale(1, 1);
        }

        function clearSign() {
            signPad.clear();
        }

        function saveSign() {
            if (signPad.isEmpty()) {
                layer.msg("请您先在屏幕上签名!");
            }
            else {
                var type = 'saveSign';
                var signSrc = canvas.toDataURL('image/png');
                $.post("/cjg/saveMySign",{src:signSrc},function(res){
                    shell.goHome();
                });
            }
        }

        var countDownNumber = 5;

        var syncTask;

        function initOut2in() {
            syncTask = setInterval(function () {
                var data = {msg: '{type:\'null\'}'};
                out2in(data);
            }, 1000);
        }

        var inProgress = false;

        var postCount = 0;
        var failCount = 0;

        var task;

        function out2in(data) {
            if (!inProgress) {
                inProgress = true;
                $.post("/cjg/out2inJs", data, function (res) {
                    inProgress = false;
                    postCount = 0;
                    failCount = 0;

                    if (res.type == 'goHome') {
                        if (syncTask) {
                            clearInterval(syncTask);
                        }
                        shell.goHome();
                    }
                    else if (res.type == 'changeView') {
                        if (syncTask) {
                            clearInterval(syncTask);
                        }
                        if (task) {
                            clearInterval(task);
                        }
                        shell.changeView(res.viewId);
                    }
                });
            }
            else {
                postCount++;
                if (postCount >= 10) {
                    inProgress = false;
                    postCount = 0;
                    failCount++;
                    if (failCount >= 3) {
                        layer.msg("服务调用异常,请检查网络连接");
                    }
                }
            }

        }




    </script>
</body>
</html>